<template>
  <el-dialog v-model="dialogVisible" width="50%" :before-close="handleClose">
    <template #header>
      <h2>{{ userid }}</h2>
    </template>
    <chat :userid="userid" />
  </el-dialog>
</template>

<script >
import { defineComponent } from "vue";
import { useStore } from "vuex";
import { ElMessageBox } from "element-plus";

import chat from "@/view/pal/cpn/chat";

import { dialogVisible, userid, socket } from "../utils";
import LocalCache from "@/utils/cache";

export default defineComponent({
  components: { chat },
  props: {},
  setup() {
    //从传输过来的信息查询对应的数据
    const state = useStore();
    state.dispatch("main/getuserlists");
    const data = state.getters["main/getusers"];

    // 点击头部关闭回掉;
    const handleClose = (done) => {
      ElMessageBox.confirm(`你确定要结束与${userid.value}聊天吗？`)
        .then(() => {
          done();
          const wsid = socket.id;
          const userid = LocalCache.getCache("id");
          if (wsid) {
            socket.emit("zzyclear", { wsid, userid });
          }
        })
        .catch(() => {});
    };

    return {
      data,
      dialogVisible,
      handleClose,
      userid,
    };
  },
});
</script>

<style scoped lang="less">
.visitingCard {
  .image {
    width: 100%;
    display: block;
  }
  .title {
    margin-top: 25px;
    .tetle-tag {
      .span {
        display: inline-block;
        margin-right: 10px;
      }
      .userinfo {
        margin-top: 10px;
      }
    }
  }
  /deep/.el-dialog__header {
    text-align: center;
  }
  /deep/.el-card {
    margin-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  /deep/.el-dialog {
    height: 600px;
    .el-dialog__body {
      height: 350px;
      overflow: auto;
    }
  }
  /deep/.chat {
    .name {
      text-align: center;
    }
    .zinput {
      width: 100%;
      margin-top: 20px;
      position: absolute;
      left: 0px;
      bottom: 15px;
      .el-input--large {
        width: 80%;
        margin-left: 20px;
      }
      .el-button {
        height: 39px;
        margin-bottom: 2px;
        float: right;
        margin-right: 20px;
      }
    }
    //聊天窗口
    .message1 {
      margin-bottom: 40px;
      > span {
        padding: 10px;
        background: rgb(77, 188, 30);
        border-radius: 10px;
      }
    }
    .message2 {
      margin-bottom: 40px;
      text-align: right;
      > span {
        padding: 10px;
        background: #409eff;
        border-radius: 10px;
      }
    }
  }
}
</style>
